<template>
    <div class="admin-login">
     
       
        <div class="admin-login" :style="{ 'margin-left': '-180px' }">
            <el-card shadow="never" style="width: 550px; margin: 0 auto; height: 600px;">
            <h3 slot="header">后台管理系统 - 管理员登录</h3>
            <el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="80px" @submit.native.prevent="handleLogin">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
  
          <!-- 多重安全验证：图形验证码 -->
          <el-form-item label="图形验证码">
            <el-input v-model="loginForm.captcha" placeholder="请输入图形验证码"></el-input>
            <el-image fit="contain" style="margin-left: 10px;" :src="captchaUrl" @click="refreshCaptcha"></el-image>
          </el-form-item>
  
          <!-- 双因素认证（例如短信验证码） -->
          <el-form-item v-if="use2FA" label="手机验证码">
            <el-input v-model="loginForm.smsCode" placeholder="请输入手机收到的验证码"></el-input>
            <br/>
            <el-button type="primary" @click="sendSmsCode">获取验证码</el-button>
          </el-form-item>
  
          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe" label="记住我"></el-checkbox>
            <span class="forgot-password"><router-link to="/forgot-password">忘记密码?</router-link></span>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" native-type="submit" :loading="loggingIn" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  </div>
       
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          captcha: '',
          smsCode: '',
          rememberMe: false,
        },
        loginRules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          captcha: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }],
          // 如果启用双因素认证，添加smsCode的验证规则
          // smsCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }],
        },
        captchaUrl: '', // 图形验证码URL
        use2FA: true, // 是否启用双因素认证，默认关闭
        loggingIn: false, // 登录中状态
      };
    },
    
    created() {
      this.refreshCaptcha();
    },
  
    methods: {
        login(){
      const currentRoute = this.$router.currentRoute;
      if (currentRoute.path !== "/um") {
        this.$router.push("/um");
      }
    },
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loggingIn = true;
            // 这里发起登录请求
            this.submitLoginForm().then(() => {
              this.loggingIn = false;
              // 登录成功后操作，如跳转到后台管理首页
            }).catch(() => {
              this.loggingIn = false;
              // 登录失败后的提示或错误处理
            });
          } else {
            this.loggingIn = false;
          }
        });
      },
      
      refreshCaptcha() {
        // 生成并更新图形验证码的逻辑，如从后端获取新的验证码图片和验证码ID
        // 示例：
        this.captchaUrl = '/api/captcha/new';
      },
  
      sendSmsCode() {
        // 发送短信验证码的逻辑
        // 示例：
        if (this.loginForm.username && this.loginForm.password) {
          // 向后端发送请求获取验证码，并在成功后显示倒计时等交互
        }
      },
  
      submitLoginForm() {
        // 提交登录表单的逻辑，向后端发送登录请求
        return new Promise((resolve) => {
          // 实际发送请求的代码，这里仅作示意
          setTimeout(() => {
            resolve();
          }, 1000);
        });
      },
    },
  };
  </script>
  <style scoped>

  
  .admin-login {
    width: 500px; /* 设置登录框宽度 */
    position: relative; /* 用于负边距居中（可选） */
    margin-left: 550px; /* （可选）对于固定宽度元素的绝对居中 */
  }
  </style>